<template>
	<div>
		<el-table :data="dataOne" stripe style="width: 100%">
			<el-table-column prop="product_name" label="作品名称">
			</el-table-column>
			<el-table-column prop="add_time" label="状态">
				<template slot-scope="scope">
					<span v-text="check_status[dataOne[scope.$index].check_status]"></span>
					<span style="margin-left: 10px;color:#0A5BC0;cursor: pointer;text-decoration: underline" v-show="dataOne[scope.$index].check_status==3" @click="reason(scope.$index,scope.row)">原因</span>
				</template>
			</el-table-column>
			<el-table-column prop="add_time" label="日期">
			</el-table-column>
			<el-table-column label="操作" width="80">
				<template slot-scope="scope">
					<span class="span-hover" @click="details(scope.$index,scope.row)">查看详情</span>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div class="block-pageination clear">
			<el-pagination background class="right" @current-change="handleCurrentChange" :page-size="10" layout="prev, pager, next" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
import { userregister, userDel, submitfile, signupload } from "@/api/index";
// import ElButton from "../../node_modules/element-ui/packages/button/src/button";
import { mapState, mapMutations } from "vuex";
export default {
    // components: { ElButton },
    data() {
        return {
            pay_status: {
                0: "未支付",
                1: "待支付",
                2: "已支付"
            },
            check_status: {
                0: "未提交",
                1: "审核中",
                2: "审核通过",
                3: "拒绝",
                4: "已发证"
            },
            product_types: {
                "1": "文字",
                "2": "口述",
                "3": "音乐",
                "4": "喜剧",
                "5": "曲艺",
                "6": "舞蹈",
                "7": "杂技艺术",
                "8": "美术",
                "9": "建筑",
                "10": "摄影",
                "11": "模型",
                "12": "电影",
                "13": "电影和类似摄制电影方法创作的作品",
                "14": "工程设计图、产品设计图",
                "15": "地图、示意图",
                "16": "其它"
            },
            dataOne: null,
            total: 0,
            page: 1,
            upload: false,
            dialogVisible: false,
            dialogImageUrl: "",
            uploadUrl: submitfile,
            fileInfo: {
                shenqingbiaoqianzi: {
                    type: "pic",
                    folder: "shenqingbiaoqianzi"
                }
            },
            refuse: false,
            refuseReason: "",
            determine: false,
            copyright_number: null
        };
    },

	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
        // 获取数据
        getList() {
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
			}
            let userRe = {
                user_id: this.croUser.user_id,
                page: this.page,
                time: Date.parse(new Date())
            };
            userregister(userRe).then(res => {
                if(res.data){
                    this.dataOne = res.data.list;
                    this.total = res.data.total;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 分页
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },

        details(index, row) {
            sessionStorage.setItem("copyright_number", row.copyright_number);
            //      this.$router.push("/copyrightlist");
            this.$router.push({
                path: "/copyrightlist",
                query: {
                    copyright_number: row.copyright_number,
                    from: "userlist"
                }
            });
        }
    },

    mounted() {
        this.getList();
    }
};
</script>
<style scoped lang="scss">
.content-outside {
    width: 100%;
    background: #f2f2f2;
    padding: 15px 0;
}

.content {
    width: 1200px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    font-size: 14px;
}

.content h4 {
    font-size: 16px;
    // font-weight: normal;
}

.content h4 > span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 25px;
}

/* hr */
.content .hr {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #c6c6c6;
    margin-top: 20px;
    font-size: 17px;
}

.content .hr > p {
    position: relative;
    top: -17px;
    left: 0;
    width: 300px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

/* step 提交后 #37629d 填写前 #c6c6c6 */
.step_state {
    height: 90px;
    padding: 35px 0 55px 100px;
}

.step {
    float: left;
}

.step_border {
    display: inline-block;
    background: #c6c6c6;
    width: 90px;
    height: 1px;
    vertical-align: top;
    margin: 0;
    margin-top: 45px;
}

.step_info {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    box-sizing: border-box;
    padding-top: 15px;
    margin: 0 15px;
}

.step_info span {
    display: block;
    line-height: 22px;
    text-align: center;
}

.step.current .step_border {
    background: #37629d;
}

.step.current .step_info {
    border: 1px solid #37629d;
    color: #37629d;
}

.step_form_info {
    margin-top: 30px;
    background: #f2f2f2;
    padding: 0 30px 30px 30px;
}

.form_box {
    padding: 15px 15px 30px 15px;
    background: #f2f2f2;
}

.form_box .h3 {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0 25px 0;
}

.el-radio-group .el-radio {
    padding-right: 15px;
    line-height: 36px;
}

.el-radio + .el-radio {
    margin: 0;
}

.ff4949 {
    color: #ff4949;
    margin-right: 4px;
}

.form_next {
    text-align: center;
    padding: 25px 0;
}

.form_width {
    width: 1000px;
    margin-left: 80px;
}

.tablepadding {
    padding: 0 10px;
    background: #fff;
}
</style>
<style>
.v-modal {
    background-color: transparent;
}
</style>
